<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>城市</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/city.css">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style>
        li:hover .dropdown-menu {display: block;}
    </style>
</head>

<body>
<ul class="nav nav-pills nav-stacked" >
    <li class="disabled"><a href="##">全国</a></li>
    <li class="dropdown  open"><a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" >热门城市</a>
        <ul class="dropdown-menu">
            <li><a href="#">成都</a></li>
            <li><a href="#">北京</a></li>
            <li><a href="#">深圳</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">北京</a>
        <ul class="dropdown-menu">
            <li><a href="#">学习</a></li>
            <li><a href="#">学习</a></li>
            <li><a href="#">平台</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">上海</a>
        <ul class="dropdown-menu">
            <li><a href="#">视频</a></li>
            <li><a href="#">案例</a></li>
            <li><a href="#">交流</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">海南</a>
        <ul class="dropdown-menu">
            <li><a href="#">成都</a></li>
            <li><a href="#">绵阳</a></li>
            <li><a href="#">泸州</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">广州</a>
        <ul class="dropdown-menu">
            <li><a href="#">视频</a></li>
            <li><a href="#">案例</a></li>
            <li><a href="#">交流</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">深圳</a>
        <ul class="dropdown-menu">
            <li><a href="#">视频</a></li>
            <li><a href="#">案例</a></li>
            <li><a href="#">交流</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">山东</a>
        <ul class="dropdown-menu">
            <li><a href="#">济南</a></li>
            <li><a href="#">青岛</a></li>
            <li><a href="#">烟台</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">四川</a>
        <ul class="dropdown-menu">
            <li><a href="#">成都</a></li>
            <li><a href="#">绵阳</a></li>
            <li><a href="#">泸州</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">重庆</a>
        <ul class="dropdown-menu">
            <li><a href="#">成都</a></li>
            <li><a href="#">绵阳</a></li>
            <li><a href="#">泸州</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">江苏</a>
        <ul class="dropdown-menu">
            <li><a href="#">成都</a></li>
            <li><a href="#">绵阳</a></li>
            <li><a href="#">泸州</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">浙江</a>
        <ul class="dropdown-menu">
            <li><a href="#">杭州</a></li>
            <li><a href="#">温州</a></li>
            <li><a href="#">宁波</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">绵阳</a></li>
            <li><a href="#">泸州</a></li>
        </ul>
    </li>
    <li class="nav-divider"></li>
    <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">武汉</a>
        <ul class="dropdown-menu">
            <li><a href="#">杭州</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">成都</a></li>
            <li><a href="#">绵阳</a></li>
            <li><a href="#">泸州</a></li>
        </ul>
    </li>
</ul>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-hover-dropdown/2.0.10/bootstrap-hover-dropdown.min.js"></script>
<script>
    $(document).ready(function(){
        dropdownOpen();//调用
    });
    /**
     * 鼠标划过就展开子菜单，免得需要点击才能展开
     */
    function dropdownOpen() {

        var $dropdownLi = $('li.dropdown');

        $dropdownLi.mouseover(function() {
            $(this).addClass('open');
        }).mouseout(function() {
            $(this).removeClass('open');
        });
    }
</script>

</body>
</html>
